<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .box {
            width: 200px;
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: lightsteelblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="slideUp">收起菜单</button>
<button id="slideDown">弹出菜单</button>
<div class="box"></div>
<div class="box" id="menu_class">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分类相关</div>
<div class="outter" id="outter">
    <div class="box" id="box1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;查看分类</div>
    <div class="box" id="box2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加分类</div>
    <div class="box" id="box3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除分类</div>
</div>
<div class="box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户相关</div>
<script>
    $(function () {
        $('#slideUp').click(function () {
            $('#box1').slideUp('1000');
            $('#box2').slideUp('500');
            $('#box3').slideUp('100');
        })
        $('#slideDown').click(function () {
            $('#box1').slideDown('100');
            $('#box2').slideDown('500');
            $('#box3').slideDown('1000');
        })
        $('#menu_class').click(function () {
            $('#outter').slideToggle(300);
        })
    })
</script>
</body>
</html>